setInterval和setTimeout区别(验证码倒计时)

写了一个验证码60s倒计时的小demo来帮助记忆和区别setInterval和setTimeout。

html

<input type="button" id="btn1" value="setInterval获取验证码btn1" onclick="getTime1()" />
<input type="button" id="btn2" value="setTimeout获取验证码btn2" onclick="getTime2()" />  

js

//setInterval重复循环计时，需要清除计时器 (clearInterval)
function getTime1(){
    var time1=60;
    var val='';

    codeTimes=setInterval(function() { 
        if(time1<=0){
            clearInterval(codeTimes);
            $('input#btn1').val("获取验证码btn1");
            $('input#btn1').attr("disabled",false);
        }else{
            time1--;
            val=time1+'后重获';
            $('input#btn1').val(val);
            $('input#btn1').attr("disabled",true);
        }
        
    },1000);
}

// setTimeout倒计时,只重复一次，计时需要反复调用

var time2=60;
function getTime2() { 
    if (time2 <= 0) { 
        $('input#btn2').val("获取验证码btn2");
        $('input#btn2').attr("disabled",false);
        time2 = 60; 
    } else { 
        time2--;
        val=time2+'后重获';
        $('input#btn2').val(val);
        $('input#btn2').attr("disabled",true);
        setTimeout(function() { 
            gettime() 
        },1000)
    } 
    
} 

---

1.如上代码所示，setInterval会自动重复，setTimeout不会重复。setInterval每隔指定的时间就执行对应的函数或代码，所以会使用到clearInterval来清除取消setInterval()设定的定时操作

2.而setTimeout只执行一次，所以，在进行计时操作的时候，需要重复调用函数。

3.setTimeout可多用于延迟操作，SetInterval多用于重复进行某操作。